<template>
  <el-radio-group v-model="country" @change="changeValue">
    <el-radio
      v-for="item in countryOptions"
      :key="item.value"
      :label="item.label"
      :disabled="item.disable"
    >
      <img :src="item.img" alt="" class="img-country-icon">
      {{item.text}} ({{item.num}})
    </el-radio>
  </el-radio-group>
</template>

<script>
import {getSellerOrderNum} from "@/api/order";

export default {
  name: "RadioCountry",
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
  },
  watch: {
    value(val) {
      this.country = val;
    }
  },
  mounted() {
    this.country = this.value;
  },
  created() {
    this.getData();
  },
  data() {
    return {
      country: '',
      countryOptions:[
        // MLM墨西哥，MLB巴西，MLC智利，MCO哥伦比亚
        {label:'MLM',text:'墨西哥' , img: require('@/assets/images/country/mx.png'),disable:false,num:0},
        {label:'MLB',text:'巴西', img: require('@/assets/images/country/br.png'),disable:false,num:0},
        {label:'MLC',text:'智利', img: require('@/assets/images/country/cl.png'),disable:false,num:0},
        {label:'MCO',text:'哥伦比亚', img: require('@/assets/images/country/co.png'),disable:false,num:0},
      ],
    }
  },
  methods: {
    // 获取数据
    async getData() {
      await getSellerOrderNum()
        .then(res=>{
          const {data} = res
          for (const dataKey in data) {
            this.countryOptions.some(option =>{
              if(option.label === dataKey){
                option.disable = data[dataKey].disable
                option.num = data[dataKey].num
                if(this.country === '' && option.disable === false){
                  this.country = option.label;
                }
                return true
              }
              return false
            })
          }
        })
    },
    changeValue() {
      this.$emit('change', this.country);
    },
  }
}
</script>

<style scoped>

</style>
